本文件由FirstUI授权予秦皇岛玄铁网络科技（手机号： 13661 0 432      0 4，身份证尾号：2FJF80）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
<template>
<view class="fui-wrap">
    <view class="fui-container">
        <scroll-view :scroll-with-animation="true" :enable-back-to-top="true" @scrolltolower="onReachBottom" scroll-y="true" style="height:100vh;">
            <view class="fui-page__bd fui-page__spacing" v-if="flowList.length > 0">
                <!-- <view class="fui-section__title">我的关注</view> -->
                <fui-horizontal-scroll background="rgba(255, 43, 43, .08)" scrollBarColor="#FF2B2B" :scroll="false">
                    <view class="fui-list">
                        <view class="fui-list--item" v-for="(item,index) in flowList" :key="index" :data-index="index" :data-id="item.uid" @tap="toUser">
                            <fui-avatar size="large" class="user-head"   radius="196" marginBottom="20" :width="175" :height="175" :src="cdnHost + item.head" mode="aspectFill">
                            </fui-avatar>
                            <fui-text :text="truncate(item.nick)" color="#00000" size="24"></fui-text>
                        </view>
                    </view>
                </fui-horizontal-scroll>
            </view>
            <view v-for="(item,index) in postList" :key="index">
                <view class="fui-page__spacing user-info">
                    <fui-lazyload @tap="toUser" :data-id="item.user.uid" size="" radius="96" class="aaaa" marginBottom="0" :width="75" :height="75" :src="cdnHost+item.user.head" mode="aspectFill">

                    </fui-lazyload>
                    <label v-text="item.user.nick"></label>
                </view>
                <fui-swiper-dot :items="item.urls" :current="item.postCurrent">
                    <view class="fui-cardswiper__box">
                        <swiper class="fui-card__swiper-wrap" :style="{height: mediaHeight}" :data-id="item.id" @change="changeMedia" :indicator-dots="false" :interval="5000" :duration="150">
                            <swiper-item v-for="(url, index) in item.urls" :key="index" class="fui-cs__swiper-item">
                                <view :id="generateId(item.id, index)" class="fui-cardswiper__item">
                                    <image lazy-load v-if="url.indexOf('.mp4') == -1" :src="item.urls[0]?.startsWith('http') ? item.urls[0] : cdnHost + item.urls[0]" class="fui-cardswiper__img" :style="{height: mediaHeight}"></image>
                                    <video v-else ref="video" :id="generateId(item.id, index) + '-video'" :style="{ width: screenWidth, height: mediaHeight }" :poster="cdnHost + item.urls[index - 1]" :src="cdnHost + url" :controls="true" :autoplay="false" :loop="true" :muted="false" :enable-hardware-acceleration="true" :show-fullscreen-btn="false" :show-play-btn="true" :show-center-play-btn="true" :show-loading="true" direction="0" objectFit="cover" enable-play-gesture="true" @fullscreenchange="">
                                    </video>
                                </view>
                            </swiper-item>
                        </swiper>
                    </view>
                </fui-swiper-dot>
                <view class="fui-function">
                    <view class="fui-icon__item" @tap="likePost" :data-id="item.id">
                        <fui-icon :name="item.liked?'like-fill':'like'"></fui-icon>
                        <view class="fui-icon__name" v-if="item.likeCount >0">{{formatNumber(item.likeCount)}}</view>
                    </view>
                    <view class="fui-icon__item" @tap="downPostWithChoice" :data-id="item.id">
                        <fui-icon name="pulldown"></fui-icon>
                    </view>
                    
                    <view class="fui-icon__item share-button-container" >

                        <button v-if="user.uid>0" class="content content-share" open-type="share" :data-id="item.id">
                            <fui-icon name="share"></fui-icon>
                        </button>
                        <button v-else class="content content-share" @tap="toLogin" :data-id="item.id">
                            <fui-icon name="share"></fui-icon>
                        </button>
                        <!-- <view class="fui-icon__name" v-if="item.shareCount !='0'">{{item.shareCount}}</view> -->
                    </view>
                    <view class="fui-icon__item" @tap="collectPost" :data-id="item.id">
                        <fui-icon :name="item.collected?'star-fill':'star'"></fui-icon>
                    </view>
                </view>
                <view class="fui-oh__wrap">
                    <view @longpress="copyTitle(item)">
                        <fui-overflow-hidden  :size="28" :rows="item.hideTitle?2:1000">
                            <view v-html="item.title"></view>
                            <view v-html="getDisplayText(item.content)"></view>
                            <view class="fui-btn__text" :class="{'fui-visible':!item.hideTitle}" :data-id="item.id" @tap="changeShowTitle">{{item.hideTitle?'展开':'收起'}}</view>
                            <view class="fui-btn__text copy-btn" @tap="copyTitle(item)">复制</view>
                        </fui-overflow-hidden>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>

</view>
</template>
<script  lang="ts"  src="./home.ts"></script> 

<style>
.aaaa {
    margin-bottom: 0px;
}

.fui-container {
    overflow: hidden;
    background-color: white;
}

.fui-list {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.fui-page__bd:first-child {
    padding-top: 30rpx;
    border: 1rpx solid rgba(226, 225, 225, 0.3);
    margin-bottom: 20rpx;
    padding-bottom: 20rpx;
}

.fui-list--item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-right: 24rpx;
    /* border-radius: 66rpx; */
}

.fui-section__title {
    margin-left: 32rpx;
}

.fui-list--item:first-child {
    margin-left: 32rpx;
}

.fui-page__bd {
    padding-bottom: 30rpx;
}

.fui-page__bd.fui-page__spacing {
    padding-left: 0rpx;
    padding-right: 0rpx;
}

.fui-lazyload__wrap {
    align-items: center;
}

.user-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20rpx;
    /* margin-left: rpx; */
}

.user-info label {
    margin-left: 20rpx;
    font-size: 28rpx;
    width: 60%;
}

::v-deep .user-head .fui-avatar__wrap {
    position: relative;
    display: inline-table;
    overflow: none !important;
    flex-shrink: 0;
    z-index: 3;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* border: white !important; */
    /* border: 2px solid #dbe4e6 !important; */
    width: 85px !important;
    height: 85px !important;
    border-radius: 92px;
}

::v-deep .user-head .fui-avatar__wrap::before {
    content: '';
    position: absolute;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, orange, rgb(241, 17, 122));
    /* 红色到橙色的渐变 */
    border-radius: 50%;
    /* 确保圆角效果一致 */
    z-index: -1;
}

::v-deep .user-head .fui-avatar__size-large {

    width: 139rpx !important;
    height: 139rpx !important;
    /* border-radius: 100rpx; */
}

::v-deep .user-head .fui-avatar__wrap .fui-avatar__img {
    border: 3px solid white;
    width: 166rpx !important;
    height: 166rpx !important;
    flex: none;
}

.fui-cardswiper__box {
    width: 100%;
    height: auto;
    flex-direction: row;
    justify-content: center;
}

.fui-card__swiper-wrap {
    width: 100%;
    height: 720rpx;
}

.fui-cs__swiper-item {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.fui-cardswiper__item {
    width: 100%;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    transition-timing-function: linear;
    transition-duration: .1s;
    transition-property: transform;
    height: auto;
    background: #f8f8f8;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.fui-cardswiper__img {
    width: 100%;
    /* height: 750rpx; */
    display: block;
}

.fui-function {
    margin-top: 25rpx;
    margin-bottom: 20rpx;
    width: 100%;
    display: flex;
    margin-left: 32rpx;
    height: 50rpx;
    line-height: 32rpx;

}

.fui-icon__item {
    display: flex;
    align-items: center;
    /* 垂直居中 */
    margin-right: 20rpx;
}

.fui-icon {
    margin-right: 5px;
    /* 可选：为图标和文本之间添加一些间距 */
}

.fui-icon__item:last-child {
    margin-left: auto;
    /* 将最后一个 item 推到右边 */
    margin-right: 32rpx;
    /* 右边距为 32rpx */
}

.fui-oh__wrap {
    width: 100%;
    padding: 28rpx 32rpx;
    padding-top: 0rpx;
    box-sizing: border-box;
    background: #FFFFFF;
}

.fui-overflow__hidden-wrap {
    line-height: 1.5;
    white-space: pre-line;
}

.fui-btn__text {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    background-color: #fff;
    color: rgb(66 66 101);
    cursor: pointer;
    padding-left: 8rpx;
}

.fui-btn__text.copy-btn {
    right: 60rpx; /* 复制按钮位于收起按钮左边 */
}

.fui-btn__text::after {
    content: '';
    position: absolute;
    top: 0;
    left: -48rpx;
    height: 100%;
    width: 48rpx;
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.5) 10%, #fff);
    pointer-events: none;
    color: #666680;
}

.fui-visible {
    display: inline-block;
    position: static;
    padding-left: 0;
}

.fui-visible::after {
    background: none;
}

.content-share{
    height: 47px;
    line-height: 47px;
}

.copy-tip {
    font-size: 24rpx;
    color: #666;
    margin-top: 12rpx;
    padding: 8rpx 0;
    text-align: left;
    display: block;
    line-height: 1.4;
    background: rgba(0,0,0,0.02);
    border-radius: 4rpx;
}

</style>
